<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>容器属性综合应用</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			#header{
				width: 100%;
				background: grey;
				height: 50px;	
			}
			#header .center{
				width: 900px;
				height: 100%;
				margin: auto;
				display: flex;
				align-items: center;  /*设置子项目上下居中*/
			}
			#header .center ul{
				display: flex;
				margin-left: auto;   /*设置ul居右显示*/
			}
			#header .center ul li{
				padding: 0 20px;
			}
			#content{
				width: 900px;
				margin:20px auto;
			}
			#content ul{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;   /*设置li元素两端对齐*/
			}
			#content ul li{
				width: 200px;
				height: 240px;
				margin-bottom: 15px;
				background: #e89a62;
			}
		</style>
	</head>
	<body>
		<div id="header">
			<div class="center">
				<div>logo</div>
				<ul>
					<li>首页</li>
					<li>影片</li>
					<li>影城</li>
					<li>会员服务</li>
				</ul>
			</div>
			
		</div>
		<div id="content">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>
